<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <script src="./vue.js"></script>
  <body>
    <!-- 模板 -->
    <div id="example">
      <div :style="{color:color,fontSize:fontSize}">{{ message }}</div>

      <div :style="styleObject1">{{ message }}</div>

      <!-- v-bind:style 的数组语法可以将多个样式对象绑定到一个元素上 -->
      <div :style="[styleObject1,styleObject2]">{{ message }}</div>
    </div>

    <script>
      //数据

      let data = {
        message: 'vue学习计划',

        color: 'red',

        fontSize: '40px',

        styleObject1: {
          color: 'green',

          fontSize: '60px'
        },

        styleObject2: {
          background: '#ccc'
        }
      }

      //vm实例
      var vm = new Vue({
        el: '#example',

        data: data
      })
    </script>
  </body>
</html>
